import { Directive, DirectiveBinding } from 'vue';
import DOMPurify from 'dompurify';

/**
 * 净化HTML内容
 * @see https://github.com/cure53/DOMPurify
 * @example
 * <div v-sanitize="htmlContent"></div>
 */
export default <Directive>{
	/**
	 * 元素加载前，净化HTML内容
	 * @param {HTMLElement} el
	 * @param {DirectiveBinding} binding
	 * @param {string} binding.value HTML内容
	 */
	beforeMount(el: HTMLElement, binding: DirectiveBinding) {
		el.innerHTML = DOMPurify.sanitize(binding.value);
	},
	/**
	 * 元素更新前，净化HTML内容
	 * @param {HTMLElement} el
	 * @param {DirectiveBinding} binding
	 * @param {string} binding.value HTML内容
	 */
	updated(el: HTMLElement, binding: DirectiveBinding) {
		el.innerHTML = DOMPurify.sanitize(binding.value);
	}
};
